import React from 'react';
import {Card, Statistic} from 'antd';
import ReactEcharts from '../reactEcharts';
import '../../styles/school-data-report.scss';
import useSchoolDataReportModel from './schoolDataReportModel';

// 数据类型：
//   {
//     'male': 10,
//     'female': 10,
//     year: [{name: 'year', value: 10}]
//   };

const SchoolDataReport = (props) => {

  const ReportModel = useSchoolDataReportModel(props.data);
  console.log(ReportModel);

  return (
    <div className="school-data-report">
      <Card title={<strong>{props.data?.name}</strong>} style={{width: 600}} bordered={false}>
        <div className="base">
          <Statistic title="城市" value={props.data?.city || '缺失'}/>
          <Statistic title="成员数" value={props.data?.data_total}/>
          <Statistic title="总积分" value={props.data?.total}/>
          <Statistic title="结余积分" value={props.data?.score}/>
        </div>
        {props.data?.data_total ?
          <div className="detail">
            <ReactEcharts width={200} height={300} option={ReportModel.optionSex} theme="light"/>
            <ReactEcharts width={300} height={300} option={ReportModel.optionYear}/>
          </div> :
          <h1 className="empty">暂无成员数据</h1>}
      </Card>
    </div>
  );
};

export default SchoolDataReport;